<template>
  <div class="container">
    <div class="basec">
      <headTitle :title="PageName1" />
      <div class="basicInfo">
        <div class="info">
          <span class="title">Role</span>
          <span class="content">Manager</span>
        </div>
        <div class="info">
          <span class="title">Describe</span>
          <span class="content"
            >可以查看组织全部项目。可以添加/移除组织成员</span
          >
        </div>
      </div>
    </div>
    <div class="permisson">
      <div class="title"><headTitle :title="PageName2" /></div>
      <div class="hello">
        <tree
          :treeData="data"
          v-model="ids"
          :withoutParents="withoutParents"
          :options="treeOptions"
        ></tree>

        <!-- <div style="margin-top: 100px">
      包含父节点的数组用这个ids[必填项]:{{ ids }}
    </div>
    <div>
      不包含父节点的数组用这个withoutParents[非必填项]:{{ withoutParents }}
    </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import headTitle from "../components/headTitle";
import tree from "../components/tree";

export default {
  data() {
    return {
      PageName1: "Basic Role Information",
      PageName2: "Permission setting",
      ids: [], // 包含父节点
      withoutParents: [],
      data: [
        {
          id: 999,
          parentId: 0,
          name: "一级菜单",
          className: "first tttt",
          visibleCheckbox: true,
          child: [
            {
              id: 888,
              parentId: 999,
              name: "二级菜单",
              className: "second tttt",
              visibleCheckbox: true,
              child: [
                {
                  name: "三级菜单",
                  id: 777,
                  parentId: 888,
                  className: "third tttt",
                  visibleCheckbox: true,
                  child: [
                    {
                      name: "按钮及字段限制",
                      className: "items",
                      visibleCheckbox: true,
                      id: 666,
                      parentId: 777,
                      child: [],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 1,
          parentId: 0,
          name: "项目列表页1",
          className: "first",
          child: [
            {
              id: 34,
              parentId: 1,
              name: "二级菜单",
              className: "second",
              child: [
                {
                  id: 35,
                  parentId: 34,
                  name: "三级菜单",
                  className: "third",
                  child: [],
                },
                {
                  id: 36,
                  parentId: 34,
                  name: "三级菜单",
                  className: "third",
                  child: [],
                },
                {
                  id: 37,
                  parentId: 34,
                  name: "三级菜单",
                  className: "third",
                  child: [],
                },
              ],
            },
            {
              id: 38,
              parentId: 1,
              name: "parent 1-2",
              className: "second",
              child: [
                {
                  id: 39,
                  parentId: 38,
                  name: "leaf 1-2-1",
                  className: "third",
                  child: [],
                },
                {
                  id: 40,
                  parentId: 38,
                  name: "leaf 1-2-1",
                  className: "third",
                  child: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          parentId: 0,
          name: "项目列表页2",
          className: "first",
          child: [
            {
              id: 41,
              parentId: 2,
              name: "二级菜单",
              className: "second",
              child: [
                {
                  name: "分组设置",
                  id: 42,
                  parentId: 41,
                  className: "third",
                  child: [
                    {
                      name: "查看",
                      className: "items",
                      id: 43,
                      parentId: 42,
                      child: [],
                    },
                    {
                      name: "新增",
                      className: "items",
                      id: 44,
                      parentId: 42,
                      child: [],
                    },
                    {
                      name: "编辑",
                      className: "items",
                      id: 45,
                      parentId: 42,
                      child: [],
                    },
                    {
                      name: "删除",
                      className: "items",
                      id: 46,
                      parentId: 42,
                      child: [],
                    },
                  ],
                },
                {
                  id: 47,
                  parentId: 41,
                  name: "分组设置",
                  className: "third",

                  child: [
                    {
                      name: "查看",
                      className: "items",
                      id: 60,
                      parentId: 47,
                      child: [],
                    },
                    {
                      name: "新增",
                      className: "items",
                      id: 61,
                      parentId: 47,
                      child: [],
                    },
                    {
                      name: "编辑",
                      className: "items",
                      id: 62,
                      parentId: 47,
                      child: [],
                    },
                    {
                      name: "删除",
                      className: "items",
                      id: 63,
                      parentId: 47,
                      child: [],
                    },
                  ],
                },
                {
                  id: 48,
                  parentId: 41,
                  name: "分组设置",
                  className: "third",
                  child: [],
                },
              ],
            },
          ],
        },
      ],
      treeOptions: {
        withParents: false, // 是否包含父节点，如果为false,则要添加withoutParents这个参数，如果为true则不需要添加
        disabled: true, // 预览禁用选项
      },
    };
  },
  mounted() {

  },
  computed: {},
  methods: {},
  components: {
    headTitle,
    tree,
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 25px 10px 5px 20px;
  .basec {
    .basicInfo {
      margin-top: 15px;
      width: 500px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .info {
        display: flex;
        flex-direction: column;
        .title {
          color: #b3b3b3;
          font-size: 14px;
        }
        .content {
          margin-top: 10px;
          color: #f2f2f2;
          font-size: 14px;
        }
      }
    }
  }
  .permisson {
    .title {
      margin-top: 30px;
    }
    .hello {
      display: flex;
      justify-content: center;
      padding: 5px;
    }
  }
}
</style>
